<!-- 教学楼 -->
<template>
  <view>
    <view class="kjhnderr pd pm20">
      <view class="drrttser row fz26 pd">
        <view class="col pr">
          <icon type="search" size="16" class="kkjsert cz"></icon>
          <input placeholder="课室号" class="sdfsdtyee" v-model="ksNumber" @change="ksChange"/>
        </view>
        <view class="ls dfgtye">
          <picker mode="date" @change="dertrety">
            <view>{{ uuhe ? uuhe : "年/月/日" }}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="pt20 bgff">
      <scroll-view scroll-x="true" class="sdfggtyze">
        <view
          class="fgdfgfytyu pm10"
          v-for="(sd, idx) in floorNums"
          :class="ideer == idx + 1 ? 'act' : ''"
          @tap="changeFloor(sd)"
          >{{ sd }}</view
        >
      </scroll-view>
    </view>

    <view class="hb">
      <image :src="hb" class="w100 hb-img tw"></image>
    </view>
    <swiper
      :current="ideer"
      class="dsfdrttye"
      :style="{ height: hgjhgs + 'px' }"
      @change="hhvbvgse"
    >
      <swiper-item v-for="citem in floorNums">
        <scroll-view scroll-y="true" class="jhnxeeert h100">
          <view v-for="sd in fieldInfoList">
            <uni-list class="mt20">
              <uni-list-item
                :thumb="thumb"
                :title="sd.name"
                @tap="fgtyyuse(sd)"
              ></uni-list-item>
            </uni-list>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import store from "../../../store/index.js";
export default {
  data() {
    return {
      ideer: 0,
      uuhe: "2020-05-06 10:24:00",
      hgjhgs: 0,
      fieldId: 1,
      fieldInfoList: [],
      floorNums: [],
      hb: "",
      ksNumber:'',
      thumb: require("../../../static/img/dianano.png"),
      basicURL: "https://www.waibizi.com/",
    };
  },
  components: {
    // loupage
  },
  methods: {
    async fieldClassroom() {
      this.fieldInfoList = [];
      let that = this;

      let res = await this.$api.fieldClassroom({
        fieldTypeId: this.fieldId,
        paramDate: this.uuhe,
        curFloor: this.curFloor,
      });
      console.log("res", res);
      if (res.code == 200) {
        that.fieldInfoList = res.data.fieldInfoList;
        that.hb = this.basicURL + res.data.imgAddress;
      }
    },
    async getFloor() {
      let that = this;
      let res = await this.$api.getFloor({
        fieldTypeId: this.fieldId,
      });
      console.log("res", res);
      if (res.code == 200) {
        that.floorNums = res.data.floorNums;
        if (that.floorNums.length) {
          that.curFloor = that.floorNums[0];
        }
      }
    },
    ksChange () {
      if(this.ksNumber > 100) {
        this.changeFloor(Math.floor(this.ksNumber/100))
      } else {

      }
    },
    changeFloor(floor) {
      this.curFloor = floor;
      this.ideer = floor;
      this.fieldClassroom();
    },
    dsfdtt(idx) {
      this.ideer = idx;
      this.curFloor = idx;
      this.fieldClassroom();
    },
    dertrety(e) {
      console.log(e);
      this.uuhe = e.detail.value;
      this.fieldClassroom();
    },
    hhvbvgse(e) {
      this.dsfdtt(e.detail.current);
    },
    fgtyyuse(item) {
      uni.navigateTo({
        url: "/pages/gongzuo/guanli/jiaoxuelouxq?fieldId=" +
          item.id +
          "&queryDate=" +
          this.uuhe +
          "&fieldTypeId=" +
          this.fieldId +
          "&item=" +
          JSON.stringify(item),
      });
    },
  },
  mounted() {
    var date = new Date();
    this.uuhe =
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1) +
      "-" +
      parseInt(date.getDate());
    this.basicURL = store.getters.getBasicURL;
    this.hgjhgs = uni.getSystemInfoSync().windowHeight - 95;
    this.fieldId = this.pageQuery.id || this.pageQuery.fieldId;
    this.getFloor().then(() => {
      this.fieldClassroom();
    });
  },
};
</script>
<style scoped>
.tw,
/deep/ .tw img {
  height: 200upx;
  opacity: 1 !important;
}
.fgdfgfytyu {
  display: inline-block;
  width: 100upx;
  text-align: center;
  line-height: 60upx;
  font-size: 32upx;
  position: relative;
}

.sdfggtyze {
  white-space: nowrap;
}

.fgdfgfytyu.act {
  color: #3dadeb;
}

.fgdfgfytyu.act::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0upx;
  height: 4upx;
  width: 100%;
  background: #3dadeb;
}

.dsfdrttye {
  height: 100%;
}
</style>
